import React from 'react';
import {Card, Button, message, Tabs, Icon} from 'antd';
import './ui.less';

export default class Tab extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      "panes": [],
      "activeTabKey": null,
    };
  }

  componentDidMount() {
    const panes = [
      {
        title: "Tab7",
        content: "Tab7 Content",
        key: 7
      },
      {
        title: "Tab8",
        content: "Tab8 Content",
        key: 8
      },
      {
        title: "Tab9",
        content: "Tab9 Content",
        key: 9
      }
    ];
    this.setState({
      panes,
      activeTabKey: panes[0].key,
    });
  }

  render() {

    return (
      <div>
        <Card title="Tab 标签" className="card-wrap">
          <Tabs defaultActiveKey="2" onChange={this.handleTabChange}>
            <Tabs.TabPane tab="Tab 1" key="1">Content of Tab Pane 1</Tabs.TabPane>
            <Tabs.TabPane tab="Tab 2" key="2">Content of Tab Pane 2</Tabs.TabPane>
            <Tabs.TabPane tab="Tab 3" key="3">Content of Tab Pane 3</Tabs.TabPane>
          </Tabs>
        </Card>

        <Card title="带图标的 Tab 标签" className="card-wrap">
          <Tabs defaultActiveKey="2">
            <Tabs.TabPane tab={<span><Icon type="plus" />Tab 1</span>} key="4">Content of Tab Pane 1</Tabs.TabPane>
            <Tabs.TabPane tab={<span><Icon type="form" />Tab 2</span>} key="5">Content of Tab Pane 2</Tabs.TabPane>
            <Tabs.TabPane tab={<span><Icon type="bg-colors" />Tab 3</span>} key="6">Content of Tab Pane 3</Tabs.TabPane>
          </Tabs>
        </Card>

        <Card title="动态 Tab 标签" className="card-wrap">
          <Tabs
            defaultActiveKey="2"
            type="editable-card"
            onChange={this.handleEditTabChange}
            onEdit={this.handleEditTabEdit}
          >
            {
              this.state.panes.map((value) => {
                return (
                  <Tabs.TabPane tab={value.title} key={value.key}>
                    {value.content}
                  </Tabs.TabPane>
                );
              })
            }
          </Tabs>
        </Card>
      </div>
    );
  }

  handleTabChange = (key) => {
    message.success("Your select tab is " + key);
  }

  handleEditTabChange = (activeKey) => {
    this.setState({
      activeTabKey: activeKey
    })
  }

  handleEditTabEdit = (targetKey, action) => {
    this[action](targetKey);
  }

  add = () => {
    const panes = this.state.panes;
    const activeKey = `10`;
    panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
    this.setState({ panes, activeTabKey: activeKey });
  }

  remove = (targetKey) => {
    let activeKey = this.state.activeTabKey;
    let lastIndex;
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
    if (panes.length && activeKey === targetKey) {
      if (lastIndex >= 0) {
        activeKey = panes[lastIndex].key;
      } else {
        activeKey = panes[0].key;
      }
    }
    this.setState({ panes, activeTabKey: activeKey });
  }
}